<template>
  <div class="add-receive-address">
    <app-header>收货地址</app-header>

    <div class="input-group">
      <label for="receiver" class="middle-name_left" >收货人</label>
      <input v-model="userInfo.receiver" id="receiver" type="text" placeholder="请填写收货人姓名">
      <div class="line"></div>
    </div>
    <div class="input-group">
      <label for="phoneNumber" class="middle-tel_left">电话号码</label>
      <input v-model="userInfo.phoneNumber" id="phoneNumber" type="text" placeholder="请输入手机号码" @keyup="cliisShow">
      <i class="delectEvery fa fa-2x fa-times-circle" v-show="isCheck" @click="clearNub"></i>
      <div class="line"></div>
    </div>
    <div class="input-group">
      <label for="location" class="middle-area_left">所在区域</label>
      <select-area :is-show.sync="isShow" v-model="userInfo.location"></select-area>
      <input @focus="toggleAreaSelect" id="location" :value="userInfo.location || '请选择'" readonly type="text">
      <div class="line"></div>
    </div>
    <div class="input-group">
      <label for="details-address" class="middle-detailAddress_left">详细地址</label>
      <input id="details-address" v-model="userInfo.details" type="text" class="middle-detailAddress_word" placeholder="街道楼号">
      <div class="line"></div>
    </div>
    <span @click="saveAddress" class="primary-btn">保存</span>
  </div>
</template>

<script>
export default {
  name: "add-receive-address",
  data(){
    return {
      userInfo: {
        receiver: '',
        phoneNumber:'',
        location: '',
        details: '',
      },
      isShow: false,
      isCheck:false,
      code:false
    }
  },
  methods: {
    saveAddress() {
      let phpVerify = /^1[34578]\d{9}$/;
      if (this.userInfo.receiver === '' || this.userInfo.phoneNumber === '' || this.userInfo.location === '' || this.userInfo.details === '') {
        this.$notify({
          message: '请完善信息',
          duration: 2000,
          background: '#1989fa',
        })
      }else if (!phpVerify.test(this.userInfo.phoneNumber)){
        this.$notify({
          message: '电话号码不合法',
          duration: 2000,
          background: '#1989fa',
        })
      }else {
        this.$request.addr(this.userInfo)
          .then(res => console.log(res))
          .catch(error => console.log(error));
        this.$dialog({
          title: '提示',
          content: '收货地址保存成功',
          confirm: () => this.$router.push({name: 'receive-address', params: {userInfo: this.userInfo}})
        });
      }
    },
    toggleAreaSelect() {
      this.isShow = true;
    },
    clearNub() {
      this.userInfo.phoneNumber = ''
    },
    cliisShow() {
      this.userInfo.phoneNumber !== '' ?  this.isCheck = true :  this.isCheck = false;

    },
  }
}
</script>

<style scoped>
  *{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    text-decoration: none;
  }
  #location{
    color: #aaa;
  }
  #details-address{
    padding-left: 1rem;
  }
  input:-webkit-autofill { box-shadow: 0 0 0 1000px white inset !important;}
  input::-webkit-input-placeholder{
    color: #d8d8db;
  }
  .add-receive-address{
    background-color: #ffffff;
    font-size: 24px;
    color: black;
  }
  input{
    outline: none;
    border: none;
    font-size: 25px;
  }
  .line{
    background-color: #e2e2e2;
    width: 94.666666667%;
    height: 1px;
    margin-left: 0.5333333rem;
  }
  .input-group{
    line-height: 80px;
    position: relative;
    border-bottom: solid 1px #e3e3e3;
    margin-left: 20px;
  }
  .middle-name_left,.middle-tel_left,.middle-area_left {
    font-size: 28px;
    display: inline-block;
    margin-top: 10px;
    width: 200px;
  }
  .delectEvery{
    color: #cccccc;
    position: absolute;
    right: 2.6rem;
    top: 0.9rem;
    font-size: 18px;
  }
  .middle-detailAddress_left{
    font-size: 28px;
    margin-left: -20px;
    width: 120px;
    margin-top: 15px;
    display: block;
    padding-left: 1rem;
  }
  .middle-detailAddress_word{
    margin-left: -20px;
  }
  .primary-btn{
    width: 470px;
    line-height: 68px;
    font-size: 28px;
    color: white;
    text-align: center;
    border-radius: 40px;
    background: #3c9dfc;
    position: absolute;
    top: 650px;
    left: 60px;
    z-index: 9;
  }
</style>
